<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/demo.css">
    <title>电子商务公共服务平台大数据中心</title>
</head>

<body>
    <div class="bigBox">
        <!-- 顶部 title -->
        <div class="header_titleBox">广西电子商务公共服务平台大数据中心</div>

        <!-- 主体部分 -->
        <div class="subjectBox">

            <!-- 左边 -->
            <div class="leftBox">
                <!--  左上 第一个饼图 -->
                <div class="left_item1 left_yuan">

                </div>

                <div class="item_title item_title_none1"><b>全区快递企业月寄递量</b></div>
                <div class="item_title item_title_none2"><b>电子商务销售额、订单数</b></div>

                <!-- 左边 中间 折线图 -->
                <div class="left_item1 left_item2">

                </div>

                <!-- 左边 下面 交易概况-->
                <div class="left_item1 left_item3">
                    <div class="item_title"><b>农村电商交易概况</b></div>
                    <table>
                        <tr>
                            <th>概况名称</th>
                            <th>详情</th>
                        </tr>

                        <tr class="bag">
                            <td>累计交易总金额</td>
                            <td>4085.56万元</td>
                        </tr>
                        <tr>
                            <td>累计交易总金额</td>
                            <td>4085.56万元</td>
                        </tr>
                        <tr class="bag">
                            <td>累计交易总金额</td>
                            <td>4085.56万元</td>
                        </tr>
                        <tr>
                            <td>累计交易总金额</td>
                            <td>4085.56万元</td>
                        </tr>
                        <tr class="bag">
                            <td>累计交易总金额</td>
                            <td>4085.56万元</td>
                        </tr>
                    </table>
                </div>
            </div>


            <!-- 中间 -->
            <div class="centerBox">
                <!-- 中间上面地图 -->
                <div class="center_item1 ditu">

                </div>
                <div class="item_title .item_title_none3"><b>广西电子商务进农村</b></div>

                <!-- 中间下面俩表格 -->
                <div class="center_item2">
                    <!-- 左边 -->
                    <div class="item2_left">
                        <div class="item_title"><b>全区快递企业月寄递量</b></div>
                        <table>
                            <tr>
                                <th>活动主题</th>
                                <th>活动举办地</th>
                                <th>日期</th>
                            </tr>

                            <tr class="bag">
                                <td>2018广西特产行销全国</td>
                                <td>南宁</td>
                                <td>2018年</td>
                            </tr>
                            <tr>
                                <td>2018广西特产行销全国</td>
                                <td>南宁</td>
                                <td>2018年</td>
                            </tr>
                            <tr class="bag">
                                <td>2018广西特产行销全国</td>
                                <td>南宁</td>
                                <td>2018年</td>
                            </tr>
                            <tr>
                                <td>2018广西特产行销全国</td>
                                <td>南宁</td>
                                <td>2018年</td>
                            </tr>
                            <tr class="bag">
                                <td>2018广西特产行销全国</td>
                                <td>南宁</td>
                                <td>2018年</td>
                            </tr>
                        </table>
                    </div>

                    <!-- 右边 -->
                    <div class="item2_left">
                        <div class="item_title"><b>全区快递企业月寄递量</b></div>
                        <table>
                            <tr>
                                <th>活动主题</th>
                                <th>活动举办地</th>
                                <th>日期</th>
                            </tr>

                            <tr class="bag">
                                <td>2018广西特产行销全国</td>
                                <td>南宁</td>
                                <td>2018年</td>
                            </tr>
                            <tr>
                                <td>2018广西特产行销全国</td>
                                <td>南宁</td>
                                <td>2018年</td>
                            </tr>
                            <tr class="bag">
                                <td>2018广西特产行销全国</td>
                                <td>南宁</td>
                                <td>2018年</td>
                            </tr>
                            <tr>
                                <td>2018广西特产行销全国</td>
                                <td>南宁</td>
                                <td>2018年</td>
                            </tr>
                            <tr class="bag">
                                <td>2018广西特产行销全国</td>
                                <td>南宁</td>
                                <td>2018年</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>



            <!-- 右边 -->
            <div class="leftBox rightBox">
                <!-- 右上 第一个折线图 -->
                <div class="left_item1 right_zheXian">

                </div>
                <div class="item_title item_title_none4"><b>全区快递寄递数量</b></div>

                <!-- 右边 中间  -->
                <div class="left_item1 left_item2">
                    <div class="item_title"><b>电商企业入驻情况</b></div>
                </div>

                <!-- 右边 下面 平台活动案例-->
                <div class="left_item1 left_item3">
                    <div class="item_title"><b>平台活动案例</b></div>
                    <table>
                        <tr>
                            <th>活动主题</th>
                            <th>活动举办地</th>
                            <th>日期</th>
                        </tr>

                        <tr class="bag">
                            <td>2018广西特产行销全国</td>
                            <td>南宁</td>
                            <td>2018年</td>
                        </tr>
                        <tr>
                            <td>2018广西特产行销全国</td>
                            <td>南宁</td>
                            <td>2018年</td>
                        </tr>
                        <tr class="bag">
                            <td>2018广西特产行销全国</td>
                            <td>南宁</td>
                            <td>2018年</td>
                        </tr>
                        <tr>
                            <td>2018广西特产行销全国</td>
                            <td>南宁</td>
                            <td>2018年</td>
                        </tr>
                        <tr class="bag">
                            <td>2018广西特产行销全国</td>
                            <td>南宁</td>
                            <td>2018年</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

    </div>
</body>

<script src="./echarts/echarts.min.js"></script>
<script type="module">

    // ================== 右上 折线图
    const myChartsDom1 = document.querySelector('.right_zheXian')
    const myChart1 = echarts.init(myChartsDom1)
    const config1 = {
        // 名字
        title: {
            text: '',
        },
        tooltip: {

        },
        // 图表距离边框的距离，可用百分比和数字（px）配置
        girder: {
            top: '30px',
            bottom: '5px',
            left: '10px',
            right: '10px',
            containLabel: true,
        },
        legend: {
            textStyle: {
                color: '#ddd',
            },
        },
        xAxis: {
            data: ['2018年9月', '2018年10月', '2018年11月', '2018年12月', '2019年1月1日']
        },
        textStyle: {
            color: '#Fff',
        },
        yAxis: {
            min: 0,
            max: 8000,
            splitLine: {
                show: false
            }
        },
        series: [

            {
                type: 'line',
                name: '顺丰快递',
                data: [4000, 4500, 4000, 3700, 3500],
                color: '#b23941'
            },
            {
                type: 'line',
                name: '顺丰快递',
                data: [3500, 3500, 3400, 3400, 3000],
                color: '#f9a74c'
            },
            {
                type: 'line',
                name: '百世快递',
                data: [0, 0, 0, 0, 0],
                color: '#aba349'
            },
            {
                type: 'line',
                name: '圆通快递',
                data: [900, 1000, 1100, 1100, 1100],
                color: '#32a4b6'
            },
            {
                type: 'line',
                name: '中通快递',
                data: [6200, 6500, 7000, 6500, 7000],
                color: '#3b98d6'
            },
            {
                type: 'line',
                name: '申通快递',
                data: [1000, 1000, 1300, 1300, 1200],
                color: '#416fde'
            },
            {
                type: 'line',
                name: '韵达快递',
                data: [1000, 1000, 1300, 1300, 1400],
                color: '#514ef2'
            },
        ]

    }
    myChart1.setOption(config1)


    //  =================== 左边中间 折线图
    const myChartsDom2 = document.querySelector('.left_item2')
    const myChart2 = echarts.init(myChartsDom2)
    const config2 = {
        title: {},
        tooltip: {},
        // 图表距离边框的距离，可用百分比和数字（px）配置
        girder: {
            top: '30px',
            bottom: '5px',
            left: '10px',
            right: '10px',
            containLabel: true,
        },
        legend: {
            textStyle: {
                color: '#ddd',
            },
        },
        xAxis: {
            data: ['2018年9月', '2018年10月', '2018年11月', '2018年12月', '2019年1月1日']
        },
        textStyle: {
            color: '#Fff',
        },
        yAxis: {
            min: 0,
            max: 5000,
            splitLine: {
                show: false
            }
        },
        series: [
            {
                type: 'line',
                name: '销售额',
                data: [4000, 4500, 4100, 3700, 4000],
                color: '#7f2f3b'
            },
            {
                type: 'line',
                name: '订单数',
                data: [3100, 3000, 2800, 3000, 2900],
                color: '#c08041'
            }
        ],
    }
    myChart2.setOption(config2)

    // ======================= 右上 圆饼
    const myChartsDom3 = document.querySelector('.left_yuan')
    const myChart3 = echarts.init(myChartsDom3)
    const config3 = {
        title: {},
        tooltip: {
            trigger: 'item'
        },
        legend: {
            textStyle: {
                color: '#ddd'
            },
            // orient: 'vertical', // 换行

        },
        label: {
            color: 'vertical'  // 颜色，去除白色的边框
        },
        series: [
            {
                type: 'pie',
                // label:false,
                center: ['50%', '60%'],
                radius: ['0', '50%'],
                data: [
                    {
                        value: 65, name: '南宁市', itemStyle: { color: '#f845f1' }
                    },
                    {
                        value: 10, name: '柳州市', itemStyle: { color: '#ad46f4' }
                    },
                    {
                        value: 10, name: '桂林市', itemStyle: { color: '#5045f6' }
                    },
                    {
                        value: 5, name: '梧州市', itemStyle: { color: '#4777f5' }
                    },
                    {
                        value: 5, name: '北海市', itemStyle: { color: '#44aff0' }
                    },
                    {
                        value: 10, name: '防城港市', itemStyle: { color: '#45dbf7' }
                    },
                    {
                        value: 5, name: '钦州市', itemStyle: { color: '#f6d54a' }
                    },
                    {
                        value: 5, name: '贵港市', itemStyle: { color: '#f69846' }
                    },
                    {
                        value: 5, name: '玉林市', itemStyle: { color: '#ad46f3' }
                    },
                    {
                        value: 5, name: '百色市', itemStyle: { color: '#32c12e' }
                    },
                    {
                        value: 5, name: '贺州市', itemStyle: { color: '#90f5aa' }
                    },
                    {
                        value: 5, name: '河池市', itemStyle: { color: '#90f6aa' }
                    },
                    {
                        value: 5, name: ' 来宾市', itemStyle: { color: '#eaf048' }
                    },
                    {
                        value: 5, name: ' 崇左市', itemStyle: { color: '#9ff048' }
                    }
                ],
            },


        ]
    }
    myChart3.setOption(config3)


    // ================== 中间地图
    import mapData from './mock/geojson.js'
    console.log(mapData);
    const map = echarts.init(document.querySelector('.ditu'))
    echarts.registerMap('china', mapData)
    const mapOption = {
        geo: {
            map: 'china',
            show: true,
            roam: true,
            center: [108.370858, 23.102289],
            scaleLimit: {
                min: 2.5,
                max: 5,

            },

            itemStyle: {
                areaColor: '#6b81b3bd',  // 悬浮背景
                borderColor: '#78effb',
                borderWidth: 2,
                textStyle: {
                    color: '#fff'
                }
            },
            label: {
                normal: { //普通状态下的标签文本样式。(省份名称)
                    show: true, //是否在普通状态下显示标签。
                    textStyle: { // 文字设置
                        color: '#fff'
                    },
                },
            },
        }
    }
    map.setOption(mapOption)





</script>

</html>